<!doctype html>
<html data-framework="vue">
  <head>
    <meta charset="utf-8">
    <title>Vue.js • TodoMVC</title>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@1.5.1/dist/bootstrap-vue.css"/>
    <link rel="stylesheet" href="https://unpkg.com/todomvc-app-css@2.0.4/index.css">
    <style>[v-cloak] { display: none; }</style>
  </head>
  <body>
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input class="new-todo"
          autofocus autocomplete="off"
          placeholder="What needs to be done?"
          :value="newTodo"
          @input="setNewTodo"
          @keyup.enter="addTodo"
          >
      </header>
      <section class="main" v-show="todos.length" v-cloak>
        <ul class="todo-list">
          <li v-for="todo in todos"
            class="todo"
            :key="todo.id"
            :class="{ completed: todo.completed }">
            <div class="view">
              <input class="toggle" type="checkbox" v-model="todo.completed">
              <label>{{ todo.title }}</label>
              <button class="destroy" @click="removeTodo(todo)"></button>
            </div>
          </li>
        </ul>
      </section>
      <section class="file-upload">
        <p>
          <center>Upload JSON file with Todo items</center>
        </p>
        <b-form-file id="todo-file-upload" accept=".json"
          v-model="file" @change="uploadTodos"></b-form-file>
      </section>
    </section>
    <footer class="info">
      <p>Written by <a href="http://evanyou.me">Evan You</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>

    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/vue@2.5.5/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
    <script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@1.5.1/dist/bootstrap-vue.js"></script>
    <script src="app.js"></script>
  </body>
</html>
